<template>
  <van-dialog id="van-dialog" />

  <view :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }" class="page">
    <view class="page-content" :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }">
      <view class="card-container">
        <view style="
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;
            width: 100%;
          " @click="jumpPage">
          <van-image round show-error width="60px" height="60px" :src="userInfo.avatar" />
          <text style="
              flex: 1;
              margin-left: 16px;
              font-size: 18px;
              color: #1b1b1b;
              font-weight: bold;
            ">{{ userInfo.name }}</text>
        </view>
        <view style="
            height: 1px;
            width: 100%;
            background-color: #eaeaea;
            margin-top: 10px;
          "></view>
        <view style="
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;
            width: 100%;
            padding-top: 15px;
            padding-bottom: 15px;
          " @click="jumpModifyPassPage">
          <text style="flex: 1; font-size: 14px; color: #3d3d3d">修改密码</text>
          <image src="@/static/icon/ic_next.png" mode="scaleToFill" style="height: 12px; width: 6px" />
        </view>
      </view>
      <text class="out-login-text" @click="showOutLoginDialog">退出登录</text>
    </view>
    <view style="background-color: #0ca863; height: 100px; width: 100%" />
  </view>
  <van-dialog id="van-dialog" />
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { logout } from "@/api/common";
import { UserTip } from "@/utils/constants";
import { onLoad } from "@dcloudio/uni-app";
import { reomveUserData, userToken } from "@/utils/account";
import { isEmptyString } from "@/utils/tools";
let tempAvatar = "https://pms.sunbirddata.com.cn:8082/common/image/miniprogram-user.png"
//页面高度
let screenHeight = ref(0);
let screenWidth = ref(0);
let userInfo = reactive({
  name: "",
  avatar: tempAvatar
})
//底部容器高度
uni.getSystemInfo({
  success: (result) => {
    const height = result.windowHeight;
    const width = result.windowWidth;
    screenHeight.value = height;
    screenWidth.value = width;
  },
  fail: (error) => { },
});
const jumpPage = () => {
  let token = userToken()
  if (!isEmptyString(token)) return
  uni.navigateTo({
    url: "/subpackages/login/login",
  });
};
const jumpModifyPassPage = () => {
  uni.navigateTo({
    url: "/subpackages/modify/modifyPass",
  });
};
const showOutLoginDialog = () => {
  uni.showModal({
    title: '退出登录',
    content: '是否退出当前账号？',
    showCancel: true,
    success: function (res) {
      if (res.confirm) {
        loginOut()
      }
    }
  })


}
const loginOut = async () => {
  await logout().then(data => {
    reomveUserData(true)
  })
}
onLoad((options) => {
  let json = uni.getStorageSync(UserTip.USER_DATA)
  let { name, avatar } = JSON.parse(json)
  userInfo.name = name
  userInfo.avatar = isEmptyString(avatar) ? tempAvatar : avatar

})

</script>

<style lang="less">
.card-container {
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  border-radius: 20px;
  padding-top: 18px;
  padding-left: 16px;
  padding-right: 16px;
}

.page {
  position: relative;
  background-color: #efefef;
}

.page-content {
  width: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 50px;
}

.out-login-text {
  width: 90%;
  height: 44px;
  border-radius: 4px;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #d93838;
}
</style>
@/utils/account